<template>
   <div  class="login-page mx-auto p-3 w-330">
       <h5 class="my-4 text-center">登录到者也</h5>
       <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">邮箱</label>
            <!-- v-model 传给子组件，子组件变化，传回来变化的值 -->
            <ValidateInput :rules="emailRules" v-model="emailVal" placeholder='请输入邮箱' type='text' ref="inputRef"/>
            <!-- {{emailVal}} -->
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <ValidateInput :rules="passwordRules" v-model="passwordVal" placeholder='请输入密码' type='password'/>
        </div>
        <template #submit>
            <span class="btn btn-primary">提交</span>
        </template>
        </validate-form>
    </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref} from 'vue'
import ValidateInput,{RulesProp} from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import createMessage from '../components/createMessage'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default defineComponent({
    name:'LoginPage',
    components:{
        ValidateInput,
        ValidateForm
    },
    setup(){
        const inputRef=ref<any>()
        const emailVal=ref('')
        const passwordVal=ref('')
        const router=useRouter()
        const store=useStore()
        const email=reactive({
            val:'',
            error:false,
            message:''
        })
        const emailRules:RulesProp=[
            {type:'required',message:'电子邮箱地址不能为空'},
            {type:'email',message:'请输入正确的电子邮箱合适'}
        ]
        const passwordRules:RulesProp=[
            {type:'required',message:'密码不能为空'}
        ]
        //接收子组件穿的值，和调用子组件的方法
        const onFormSubmit=(result:boolean)=>{
            console.log('123456789',result)
            console.log(inputRef.value.ValidateInput())
            if(result){
                const payload={
                    email:emailVal.value,
                    password:passwordVal.value
                }
                // router.push({name:'column',params:{id:1}})
                store.dispatch('loginAndFetch',payload).then(data=>{
                    // 弹窗
                    createMessage('登录成功 2秒后跳转主页','success')
                    router.push('/')
                }).catch(e=>{
                    // 在main.ts中，报错返回的是Promise.reject(error)
                    console.log(e)
                })
            }
        }

        return{
            email,
            emailRules,
            passwordRules,
            emailVal,
            passwordVal,
            onFormSubmit,
            inputRef
        }
    }

})
</script>
<style scoped>
.form-text{
    color: red;
}
.login-page{
    width: 500px;
}
</style>